<template>
<div class="app-container">

     <!-- 顶部区域 -->
    <mt-header fixed title="首页">首页</mt-header>
    <!-- 中间路由 router-view -->
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
        

    <!-- 底部 区域 -->

    <nav class="mui-bar mui-bar-tab">
        <router-link class="mui-tab-item" href="#tabbar" to="/home">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </router-link>
        <router-link class="mui-tab-item" href="#tabbar-with-chat" to="/assignment">
            <span class="mui-icon mui-icon-email"><span class="mui-badge">{{$store.getters.getAllCount}}</span></span>
            <span class="mui-tab-label">预约</span>
        </router-link>
        <router-link class="mui-tab-item" href="#tabbar-with-contact" to="/report">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">报告</span>
        </router-link>
        <router-link class="mui-tab-item" href="#tabbar-with-map" to="/profile">
            <span class="mui-icon mui-icon-contact"></span>
            <span class="mui-tab-label">我的</span>
        </router-link>
    </nav>
</div>
</template>
  
<script>

// 徽标 值就是把state的car中每项中的count值相加即可
    
    export default {
       
    }

</script>  

<style lang="scss" scoped>
    .app-container {
        padding-top: 40px;
        overflow-x: hidden; /*注意这个很重要 解决动画切换时候横向位移的问题*/
        z-index: 999;
    }

    .v-enter{
        opacity: 0;
        transform: translateX(100%);
    }

    .v-leave-to {
        opacity: 0;
        transform: translateX(-100%);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 350ms ease;
    }
</style>
